// 保险缴纳 饼状图
// var vm = new Vue({
//     el:"",
//     data:{
//         datas:[
//             { value: 120, name: '正式员工保险合计' + "\n" + '(个人部分)' },
//             { value: 400, name: '外聘员工保险合计' + "\n" + '(单位部分)' },
//             { value: 400, name: '外聘员工保险合计' + "\n" + '(个人部分)' },
//             { value: 400, name: '正式员工保险合计' + "\n" + '(单位部分)' }
//         ],
//         totals:"",
//         Tolvalue:""
//     },
//     method:{
//             ak:function(){
//                 for(var i=0;i<datas.length;i++){
//                     totals += +datas[i].value;
//                     if (data[i].name == name) {
//                         Tolvalue = data[i].value;
//                     }
//                     console.log(totals)
//                 }
//                 console.log(123132)
//             }
//         }
// })
function getcontainer(id) {
    var dom = echarts.init(document.getElementById(id), 'walden');
    const datas = [
        { value: 120, name: '正式员工保险合计' + "\n" + '(个人部分)' },
        { value: 400, name: '外聘员工保险合计' + "\n" + '(单位部分)' },
        { value: 400, name: '外聘员工保险合计' + "\n" + '(个人部分)' },
        { value: 400, name: '正式员工保险合计' + "\n" + '(单位部分)' }
    ]
    const legendArr = [];
    var p;
    var colorList = [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',

    ];
    datas.forEach((item, i) => {
        legendArr.push({
            type: 'plain',
            orient: 'vertical',
            align: 'left',//1

            top: `${i == 0 ? -  10 : i == 1 ? 50 : i == 2 ? 50 : i == 3 ? -10 : 10}%`,
            // top: function () {
            //     return `${88 - (i + 1) * 40}%`//1
            // },

            x: `${i == 10 ? 0 : i == 1 ? 65 : i == 2 ? 0 : i == 3 ? 0 : 65}%`,//1
            itemWidth: 10,//1
            itemHeight: 10,//1
            data: [
                {
                    name: item.name,
                    icon: 'rect',//1
                    borderWidth: 0,//1
                    itemWidth: 0,//1

                }
            ],

            padding: [50, 10, 50, 0],//1
            textStyle: {
                fontSize: 15,//1
                //封装2个方法{a|name}
                rich: {
                    a: {
                        fontSize: 15,
                        color: '#fff',
                    },
                    b: {
                        fontSize: 15,
                        color: colorList[i]
                    }
                }
            },
            formatter: function (name) {
                var data = options.series[0].data;
                var total = 0;
                var tarValue;
                var six = '1';
                for (var i = 0, l = data.length; i < l; i++) {
                    total += +data[i].value;
                    if (data[i].name == name) {
                        tarValue = data[i].value;
                    }
                }
                p = (tarValue / total * 100).toFixed(2);
                return '{a|' + name + '}' + '\n' + '\n ' + '\t\t' + '{a|' + tarValue + '}' + '{a|万元}' + '\t\t\t\t\t\t' + '' + '{b|' + p + '}' + '{a|%}' + '\n\n\t\t\t\t\t\t' + '{a|总额}' + '\t\t\t\t\t\t\t\t\t\t' + '{a|占比}';
            },

        })
    })






    // var dom = document.getElementById(id);
    // var myChart = echarts.init(dom, null, {
    //     renderer: 'canvas',
    //     useDirtyRect: false
    // });
    // var app = {};
    // const datas = [
    //     { value: 120, name: '正式员工保险合计<br/><span class="huanhang">(个人部分)</span>' },
    //     { value: 400, name: '外聘员工保险合计<br/><span class="huanhang">(单位部分)</span>' },
    //     { value: 400, name: '外聘员工保险合计<br/><span class="huanhang">(个人部分)</span>' },
    //     { value: 400, name: '正式员工保险合计<br/><span class="huanhang">(单位部分)</span>' }
    // ]
    var options;

    options = {
        legend: legendArr,
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {

                // text: '总数',
                text:
                    datas.reduce((n, i) => {
                        return (n += i.value);
                    }, 0) + '万\n\n合计金额',

                textAlign: 'center',
                fill: "rgba(190, 229, 251, 1)",





                // width: 30,
                // height: 30,

                fontSize: 15,

            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    // position: 'center'
                },
                emphasis: {
                    // label: {
                    //   // show: true,
                    //   fontSize: 40,
                    //   fontWeight: 'bold'
                    // }
                },
                // labelLine: {  
                //   show: false
                // },
                data: datas,

            }
        ]
    };

    if (options && typeof options === 'object') {
        dom.setOption(options);
    }

    window.addEventListener('resize', dom.resize);
}

// 收入总额柱状图
function getroundpillars(id) {
    var dom = document.getElementById(id);
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;
    const dataList =
        [
            { name: '固定工资', value: '590' },
            { name: '注册师津贴', value: '540' },
            { name: '生产资金', value: '920' },
            { name: '补充奖金', value: '965' },
            { name: '创新成果专项奖励', value: '1100' },
            { name: '固定工资', value: '590' },
            { name: '注册师津贴', value: '540' },
        ]
    let max = dataList.map(item => item).sort((a, b) => b.value - a.value)[0]
    let dataMaxList = new Array(dataList.length).fill(max)
    option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',

            },

            formatter: function (params) {
                return params[0].name + '<br>金额(元)：' + params[0].data;
            },
        },
        xAxis: {
            type: 'category',

            data: dataList.map(item => item.name),

            axisLabel: {
                margin: 20,
                // x轴文本换行
                formatter: function (params) {
                    var newParamsName = '' // 最终拼接成的字符串
                    var paramsNameNumber = params.length // 实际标签的个数
                    var provideNumber = 4 // 每行能显示的字的个数
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                    // 条件等同于rowNumber>1
                    if (paramsNameNumber > provideNumber) {
                        // 循环每一行,p表示行
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "" // 表示每一次截取的字符串
                            var start = p * provideNumber // 开始截取的位置
                            var end = start + provideNumber // 结束截取的位置
                            // 此处特殊处理最后一行的索引值
                            if (p == rowNumber - 1) tempStr = params.substring(start, paramsNameNumber)
                            else tempStr = params.substring(start, end) + "\n" // 每一次拼接字符串并换行
                            newParamsName += tempStr // 最终拼成的字符串
                        }
                    } else {
                        newParamsName = params // 将旧标签的值赋给新标签
                    }
                    return newParamsName
                },
                textStyle: {
                    fontSize: 13
                },

            },

            axisLine: {//这是y轴文字颜色
                lineStyle: {
                    color: "#fff",


                }
            }

        },
        yAxis: {
            type: 'value',
            name: "金额(元)",
            nameTextStyle: {
                color: ""
            },
            splitLine: {    //网格线
                lineStyle: {
                    type: 'dashed',//设置网格线类型 dotted：虚线   solid:实线
                },
                show: true //隐藏或显示
            },
            axisLine: {//这是y轴文字颜色
                lineStyle: {
                    color: "#fff",
                }
            }



        },
        series: [
            {
                // /数据图
                data: dataList.map(item => item.value),

                type: 'bar',
                barGap: '-100%',
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#0B4EC3" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#138CEB" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#17AAFE" // 100% 处的颜色
                        }], false)
                    }
                },
                z: 2,
            },
            {
                // /数据图
                data: dataList.map(item => item.value),
                type: 'bar',
                barWidth: 30,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#09337C" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#0761C0" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#0575DE" // 100% 处的颜色
                        }], false)
                    }
                },
                z: 1,
            },
            {
                // 最上面菱形
                data: dataList.map(item => item.value),
                type: 'pictorialBar',
                symbol: 'diamond',

                symbolSize: ['30', '15'],
                symbolPosition: 'end',
                symbolOffset: ['', '-50%'],
                itemStyle: {
                    color: 'rgba(61, 138, 228, 1)'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        fontSize: 10,
                        fontWeight: 'bold',

                        textStyle: {

                            textShadowColor: "rgba(53, 219, 255, 1)",//文字阴影颜色
                            textShadowBlur: 10.5,//文字本身的阴影长度
                            // textShadowOffsetX:1,//文字本身的阴影 X 偏移
                            // textShadowOffsetY:1,//文字本身的阴影 Y 偏移
                            color: 'rgba(53, 219, 255, 1)',


                        }
                    },
                },
                z: 3
            },
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
}

// 绩效分配堆叠图
function getmin(id) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(id));

    // 指定图表的配置项和数据
    var option = {
        title: {

            textStyle: {
                color: 'rgba(214, 233, 255, 1)'  // 设置文本颜色为白色
            }
        },
        tooltip: {
            backgroundColor: 'rgba(117, 183, 255, 0.6);',  // 设置背景颜色为黑色，透明度为 0.7
            textStyle: {
                color: 'rgba(214, 233, 255, 1)'  // 设置文本颜色为白色
            },
            borderRadius: 15,
            trigger: 'axis',
            formatter: function (params) {
                var result = '';
                var result = '<div style="text-align: center;">';
                for (var i = 0; i < params.length; i++) {
                    var data = params[i].data;
                    var seriesName = params[i].seriesName;
                    result += '<div >' + data + '元<br/>' + seriesName + '<br/>' + '</div>';
                }
                result += '</div>';
                return result;
            },
        },
        xAxis: {
            type: 'category',
            data: ['', '', '', ''],
            axisLine: {
                show: false // 隐藏x轴的边框
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#FFFFFF' // 设置刻度值颜色为白色
            },
            splitNumber: 3,
            axisLine: {
                show: false // 隐藏y轴的边框
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(192, 192, 192, 0.5)' // 设置分隔线颜色为灰色
                }
                // show: false //隐藏下划线
            }
        },
        legend: {
            itemHeight: 12,
            itemWidth: 12,
            data: [
                {
                    name: '正式员工',
                    icon: 'rect',
                },
                {
                    name: '外聘员工',
                    icon: 'rect',
                }
            ],
            itemStyle: {
                type: 'rect',
                borderWidth: 0 // 去除图例边框
            },
            textStyle: {
                color: 'rgba(214, 233, 255, 1)'  // 设置文本颜色为白色
            },
        },
        series: [
            {
                name: '正式员工',
                type: 'line',//图线形式
                symbolSize: 10,
                // stack: 'Total',是否堆叠
                data: [310, 260, 280, 290],
                itemStyle: {
                    normal: {
                        color: 'rgba(41, 217, 255, 1)',
                        shadowBlur: 30,
                        shadowColor: 'rgba(41, 217, 255, 1)'
                    },
                    emphasis: {
                        shadowBlur: 10
                    }
                }
            },
            {
                name: '外聘员工',
                type: 'line',//图线形式
                symbolSize: 10,
                // stack: 'Total',是否堆叠

                data: [140, 120, 130, 130],

                itemStyle: {
                    normal: {
                        color: 'rgba(255, 122, 179, 1)',
                        shadowBlur: 30,
                        shadowColor: 'rgba(255, 122, 179, 1)'
                    },
                    emphasis: {
                        shadowBlur: 10
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 绩效分配堆叠图
function getstackeddiagrams(id) {
    var dom = document.getElementById(id);
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;


    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            textStyle: {
                color: "#fff"
            }
        },
        xAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'//虚线
                },
                show: true //隐藏

            }, axisLine: {//这是y轴文字颜色
                lineStyle: {
                    color: "#fff",
                }
            }
        },
        yAxis: {
            type: 'category',
            data: ['0级', '1级', '2级', '3级', '4级', '5级', '6级', '7级', '8级'],
            axisLine: {//这是y轴文字颜色
                lineStyle: {
                    color: "#fff",
                }
            }
        },
        series: [
            {
                name: '绩效1',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true,

                },
                itemStyle: {
                    normal: {
                        color: 'rgba(46, 180, 255, 1)',
                    }
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301, 334, 390, 330, 320, 300, 550],

            },
            {
                name: '绩效2',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(58, 111, 255, 1)'
                    }
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210, 340, 700]
            },
            {
                name: '绩效3',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(32, 202, 130, 1)'
                    }
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310, 250, 150]
            },
            {
                name: '绩效4',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(233, 216, 60, 1)'
                    }
                },
                emphasis: {
                    focus: 'series'
                },
                data: [150, 212, 201, 154, 190, 330, 410, 320, 560]
            },
            {
                name: '绩效5',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(227, 115, 24, 1)'
                    }
                },
                emphasis: {
                    focus: 'series'
                },
                data: [820, 832, 901, 934, 290, 330, 320, 950, 740]
            },
            {
                name: '',    // 总数显示，生成一个总数的柱状图，将颜色设为透明，        
                type: 'bar',     // label将位置设备内部底部，造成一个总数显示在
                stack: 'total',    // 柱状图上方的假象
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        textStyle: {
                            color: '#fff',
                            textShadowColor: "rgba(53, 219, 255, 1)",//文字阴影颜色
                            textShadowBlur: 4,//文字本身的阴影长度
                        },
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(128, 128, 128, 0)',      // 柱状图颜色设为透明

                    }
                },
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
        ]
    };


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
}

function getsynthesis(id) {
    var dom = document.getElementById(id);
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;
    const dataList = [{
        name: '人工成本合计',
        value: '380'
    },
    {
        name: '收入总额合计',
        value: '330'
    },
    {
        name: '保额合计',
        value: '330'
    },
    {
        name: '福利金额合计',
        value: '310'
    },
    {
        name: '教育培训费用合计',
        value: '290'
    },
    {
        name: '教育培训费用合计',
        value: '250'
    }
    ]
    let max = dataList.map(item => item).sort((a, b) => b.value - a.value)[0]
    let dataMaxList = new Array(dataList.length).fill(max)
    option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',

            },

            formatter: function (params) {
                return params[0].name + '<br>金额(元)：' + params[0].data;
            },
        },
        xAxis: {
            type: 'category',
            data: dataList.map(item => item.name),

            axisLabel: {
                margin: 20,

                // x轴文本换行
                formatter: function (params) {
                    var newParamsName = '' // 最终拼接成的字符串
                    var paramsNameNumber = params.length // 实际标签的个数
                    var provideNumber = 4 // 每行能显示的字的个数
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                    // 条件等同于rowNumber>1
                    if (paramsNameNumber > provideNumber) {
                        // 循环每一行,p表示行
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "" // 表示每一次截取的字符串
                            var start = p * provideNumber // 开始截取的位置
                            var end = start + provideNumber // 结束截取的位置
                            // 此处特殊处理最后一行的索引值
                            if (p == rowNumber - 1) tempStr = params.substring(start, paramsNameNumber)
                            else tempStr = params.substring(start, end) + "\n" // 每一次拼接字符串并换行
                            newParamsName += tempStr // 最终拼成的字符串
                        }
                    } else {
                        newParamsName = params // 将旧标签的值赋给新标签
                    }
                    return newParamsName
                }

            },

            axisLine: { //这是y轴文字颜色
                lineStyle: {
                    color: "#fff",
                }
            }

        },
        yAxis: {
            type: 'value',
            name: "",
            nameTextStyle: {
                color: ""
            },
            splitLine: { //网格线
                lineStyle: {
                    type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                },
                show: true //隐藏或显示
            },
            axisLine: { //这是y轴文字颜色
                lineStyle: {
                    color: "#fff",
                }
            }



        },
        series: [{
            // /数据图
            data: dataList.map(item => item.value),

            type: 'bar',
            barGap: '-100%',
            barWidth: 15,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#0B4EC3" // 0% 处的颜色
                    }, {
                        offset: 0.6,
                        color: "#138CEB" // 60% 处的颜色
                    }, {
                        offset: 1,
                        color: "#17AAFE" // 100% 处的颜色
                    }], false)
                }
            },
            z: 2,
        },
        {
            // /数据图
            data: dataList.map(item => item.value),
            type: 'bar',
            barWidth: 30,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#09337C" // 0% 处的颜色
                    }, {
                        offset: 0.6,
                        color: "#0761C0" // 60% 处的颜色
                    }, {
                        offset: 1,
                        color: "#0575DE" // 100% 处的颜色
                    }], false)
                }
            },
            z: 1,
        },
        {
            // 最上面菱形
            data: dataList.map(item => item.value),
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolSize: ['30', '15'],
            symbolPosition: 'end',
            symbolOffset: ['', '-50%'],
            itemStyle: {
                color: 'rgba(61, 138, 228, 1)'
            },
            label: {
                formatter: function (param) {
                    return param.data + "万"
                },
                show: true,
                position: 'top',
                fontSize: 15,
                fontWeight: 'bold',
                textStyle: {
                    color: 'rgba(53, 219, 255, 1)',
                }
            },
            z: 3
        },
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
}
// 公積金
function getincrement(id) {
    var myChart = echarts.init(document.getElementById(id));
    let colorList = Array(20).fill({
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: 'rgba(50, 110, 191, 1)' // 最左边
            }, {
                offset: 0.5,
                color: 'rgba(50, 110, 191, 1)' // 左边的右边 颜色
            }, {
                offset: 0.5,
                color: 'rgba(62, 154, 249, 1)' // 右边的左边 颜色
            }, {
                offset: 1,
                color: 'rgba(62, 154, 249, 1)'
            }]
    })
    option = {
        // backgroundColor: 'rgba(11, 32, 90, 1)',
        //提示框
        tooltip: {
            text: '总额：',
            trigger: 'axis',
            formatter: function (params) {
                return params[0].name + '：' + params[0].value + "万";
            },
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        title: {
            text: '总额：560万',
            x: 'center',
            y: 15,
            textStyle: {
                color: 'white',
                fontSize: 16,
                fontWeight: 'normal',
            },

        },
        //X轴
        xAxis: {
            type: 'category',
            data: ["住房公积金\n(公共部分)", "住房公积金\n(个人部分)", "\n增量"],
            axisLabel: {
                margin: 10,
                color: 'rgba(214, 233, 255, 1)',
                interval: 0,
                rotate: 0
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#3699e0',
                    // opacity:0.2
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#3699e0',
                    // opacity:0.2
                }
            },
            axisLabel: {
                color: '#fff',
                formatter: "{value} 万",
                fontSize: 14,
                margin: 10,
            },
            minInterval: 1,
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ffffff',
                    opacity: 0.2,
                    width: 1,
                    "type": "dashed"
                },
            },
        },
        series: [
            {
                type: 'bar',
                barWidth: '30px',
                itemStyle: {
                    normal: {
                        color: (params) => {
                            return colorList[params.dataIndex % 7];
                        }
                    }
                },
                label: {
                    show: true,
                    position: "top",
                    distance: 10,
                    formatter: function (param) {
                        return param.data + "万"
                    },
                    color: "#fff"
                },
                data: [200, 130, 230]
            },
            {
                z: 3,
                type: 'pictorialBar',
                symbolPosition: 'end',
                data: [200, 130, 230],
                symbol: 'diamond',
                barWidth: '20px',
                symbolOffset: [0, '-50%'],
                symbolSize: [30, 20],
                itemStyle: {
                    normal: {
                        borderWidth: 0,
                        color: (params) => {
                            return colorList[params.dataIndex % 7].colorStops[0].color;
                        },

                    }
                },
            },
        ],
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}


function getwelfare(id) {
    var echartsRecordThree = echarts.init(document.getElementById(id), 'walden');
    const dataes = [
        { value: '150', name: '正式员工福利金额总计' },
        { value: '310', name: '外聘员工福利金额总计' },
    ]
    const legendArr = [];
    var p;
    var colorList = [
        '#3a6fff',
        '#ff7ab3'
    ];
    dataes.forEach((item, i) => {
        legendArr.push({
            type: 'plain',
            orient: 'vertical',
            align: 'left',//1
            top: `${i == 0 ? 5 : i == 1 ? 30 : 10}%`,//1
            x: '100',//1
            itemWidth: 10,//1
            itemHeight: 10,//1
            data: [
                {
                    name: item.name,
                    icon: 'rect',//1
                    borderWidth: 0,//1
                    itemWidth: 0,//1

                }
            ],

            padding: [50, 10, 50, 0],//1
            textStyle: {
                fontSize: 15,//1
                //封装2个方法{a|name}
                rich: {
                    a: {
                        fontSize: 15,
                        color: '#fff',
                    },
                    b: {
                        fontSize: 15,
                        color: colorList[i]
                    }
                }
            },
            formatter: function (name) {
                var data = options.series[0].data;
                var total = 0;
                var tarValue;
                var six = '1';
                for (var i = 0, l = data.length; i < l; i++) {
                    total += +data[i].value;
                    if (data[i].name == name) {
                        tarValue = data[i].value; 3
                    }
                }
                p = (tarValue / total * 100).toFixed(2);
                return '{a|' + name + '}' + '\n' + '\n ' + '\t\t' + '{a|' + tarValue + '}' + '{a|万元}' + '\t\t\t\t\t\t' + '' + '{b|' + p + '}' + '{a|%}' + '\n\n\t\t\t\t\t\t' + '{a|总额}' + '\t\t\t\t\t\t\t\t\t\t' + '{a|占比}';
            },

        })
    })
    options = {
        title: {
            text: '\t\t{name|460}\t{name2|万}\n{name2|福利金额总计}',
            right: '17%',
            top: 'center',
            textStyle: {
                rich: {
                    name: {
                        fontSize: 25,
                        lineHeight: 20,
                        fontWeight: 400,
                        color: "rgba(190, 229, 251, 1)",
                        textShadowColor: "#158EFF",
                        textShadowBlur: 18,
                    },
                    name2: {
                        lineHeight: 30,
                        fontSize: 15,
                        color: "rgba(190, 229, 251, 1)",
                        textShadowColor: "#158EFF",
                        textShadowBlur: 18,
                    },
                },
            },
        },
        // tooltip: {
        //     trigger: 'item',
        //     formatter: "{a} <br/>{b}: {c} ({d}%)"
        // },
        legend: legendArr,
        series: [
            {
                name: '福利金额',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['75%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'inside',
                },
                emphasis: {
                    label: {

                        // 鼠标悬浮显示文字
                        show: false,
                        textStyle: {
                            fontSize: 10,
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    show: false
                },
                data: dataes,

                itemStyle: {
                    normal: {
                        color: function (d) {
                            return colorList[d.dataIndex]
                        },
                    }
                }
            }
        ]
    };
    echartsRecordThree.setOption(options);
    echartsRecordThree.resize();
}
function getrightTable(id) {
    var rightTa = echarts.init(document.getElementById(id), 'walden');
    const artificial  = [
        { value: 230, name: '工资' },
        { value: 150, name: '劳动保险' },
        { value: 150, name: '其他薪资支出' },
        { value: 120, name: '奖金效益' },
        { value: 100, name: '能达技术服务器' }
    ]
    const legendArr = [];
    var p;
    var colorList = [
        '#3a6fff',
        '#ff7ab3'
    ];
    artificial.forEach((item, i) => {
        legendArr.push({
            type: 'plain',
            orient: 'vertical',
            align: 'left',//1
            top: `${i == 0 ? 45 : i == 1 ? 10 : i == 2 ? 62 : i == 3 ? 31 : i == 4 ?    2:10}%`,//1
            x: `${i == 0 ? 35 : i == 1 ? 35 : 1 == 2 ? 0 : i == 3 ?0 : i == 4 ? 0:0}%`,//1
            itemWidth: 10,//1
            itemHeight: 10,//1
            data: [
                {
                    name: item.name,
                    icon: 'rect',//1
                    borderWidth: 0,//1
                    itemWidth: 0,//1

                }
            ],

            padding: [20, 0, 0, 0],//1
            textStyle: {
                fontSize: 15,//1
                //封装2个方法{a|name}
                rich: {
                    a: {
                        fontSize: 12,
                        color: '#fff',
                    },
                    b: {
                        fontSize: 15,
                        color: colorList[i]
                    }
                }
            },
            formatter: function (name) {
                var data = optionss.series[0].data;
                var total = 0;
                var tarValue;
                var six = '1';
                for (var i = 0, l = data.length; i < l; i++) {
                    total += +data[i].value;
                    if (data[i].name == name) {
                        tarValue = data[i].value; 3
                    }
                }
                p = (tarValue / total * 100).toFixed(2);
                return '{a|' + name + '}' + '\n' + '\n '  + '{a|' + tarValue + '}' + '{a|万元}' + '\t\t\t' + '' + '{b|' + p + '}' + '{a|%}' + '{a|占比}';
            },

        })
    })
    var optionss;
    optionss = {

        title: {
            text: '',
            subtext: '',
            x: 'content',
            textStyle: {
                //文字颜色
                color: 'white',
                // //字体风格,'normal','italic','oblique'
                // fontStyle:'normal',
                // //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                // fontWeight:'bold',
                // //字体系列
                // fontFamily:'sans-serif'
                // //字体大小
                // fontSize:18
            },
            subtextStyle: {},  //与textStyle类似
        },

        color: ['#20ca82', '#3a6fff', '#ff7ab3', '#d54941', '#e9d83c'],  //饼图颜色






        // tooltip: {
        //     trigger: 'item',
        //     axisPointer: {
        //         // 坐标轴指示器，坐标轴触发有效
        //         type: 'line' // 默认为直线，可选为：'line' | 'shadow'
        //     },
        //     className: 'wangx',
        //     formatter: function (params) {
        //         console.log(params)
        //         let htmlStr
        //         htmlStr =
        //             `
        //         <div>

        //           <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;margin-left:10px;margin-bottom:20px; background-color:${[
        //                 params.color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
        //             ]};">  </span>  
        //           <div class='names'>${params.data.name}</div><br/>    
        //          <div class='writing'><span class="sizes ">${params.data.value}</span><span class="title">万元</span></div>
        //          <div class='writing'><span class="sizes"style="text-shadow:none;color:${[params.color,]}">${params.percent}%</span><span class="title">占比</span></div>

        //         </div>
        //       `
        //         return htmlStr;
        //     }
        // },
        //graphic是原生图形元素组件,可以支持的图形元素包括image, text, circle等等 除了下面的属性之外,还有onclick: function () {...}属性,具体的可参照echarts文档

        graphic: {
            type: 'text',
            // 这是四个相对于父元素的定位属性，每个属性可取『像素值』或者『百分比』或者 'center'/'middle'。
            // right: 10,
            // bottom: '10%',
            right: '55', // 相对父元素居中
            top: 'middle',  // 相对父元素居中
            //可设置颜色 字体等等
            style: {
                fill: "rgba(190, 229, 251, 1)",  //text颜色
                text: '1965万元\n人工成本',
                font: '15px Microsoft YaHei',
                textShadowColor: "158EFF"


            }
        },
        legend: legendArr,

        //avoidLabelOverlap:标签重叠,为true时标签拥挤重叠的情况下会挪动各个标签的位置,为false时强制所有标签放在中心位置
        //label和labelLine:当设置label的show为false时,饼图外围的标签不显示,labelLine是标签的指导线,false则不显示.
        //emphasis指的是鼠标移到饼图外围标签时,show为false的时候,标签文字不变化,当show为true时,鼠标移到饼图外围标签时,标签会变化,变化的属性在textStyle中
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['50%', '70%'],
                left:'355',
                width:'260',
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'outside',
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },

                // labelLine: {
                //     show: false
                // },
                data: artificial,
            }
        ],
        itemStyle: {
            normal: {
                color: function (d) {
                    return colorList[d.dataIndex]
                },
            }
        }
    };

    rightTa.setOption(optionss);
    rightTa.resize();
}


function geteducate(id) {

    function setDataWithColor(data, color) {
        return data.map(item => ({
            value: item,
            itemStyle: {
                color: color
            }
        }));
    }


    const formal = [600, 1000, 1000];
    const formalcolor = '#2eb4ff';

    const interim = ['', 1400, 1700]
    const interimcolor = '#3a6fff'

    // const series = {
    //   name: 'Mail Ad',
    //   type: 'bar',
    //   stack: 'total',
    //   label: {
    //     show: true
    //   },
    //   emphasis: {
    //     focus: 'series'
    //   },
    //   data: setDataWithColor(data, color)
    // };



    var dom = document.getElementById(id);
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },

        grid: {
            backgroundColor: '#f1f1f1',
            left: '3%',
            right: '4%',
            bottom: '43%',
            containLabel: true
        },

        xAxis: {
            type: 'value',
            axisLine: {//这是y轴文字颜色
                lineStyle: {
                    color: "#fff",
                }
            }
        },
        yAxis: {
            type: 'category',
            data: ['其他', '差旅费', '培训费'],
            axisLine: {//这是y轴文字颜色
                lineStyle: {
                    color: "#fff",
                }
            }

        },
        // legend: {
        //   data: ['正式员工', '临时员工'],
        //   icon:'circle',
        //   color:'red'
        // },

        legend: {
            data: ['正式员工', '临时员工'],
            textStyle: {
                color: "#fff"
            }
        },


        series: [
            {
                name: '正式员工',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: setDataWithColor(formal, formalcolor)

            },
            {
                name: '临时员工',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: setDataWithColor(interim, interimcolor)
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
}